<template>
  <!-- 预览功能 -->
  <div>
    <el-row>
      <el-col class="viewcol" :span="6">【题型】: {{ questionType }} </el-col>
      <el-col class="viewcol" :span="6">【编号】: {{ list.id }}</el-col>
      <el-col class="viewcol" :span="6">【难度】: {{ difficulty }}</el-col>
      <el-col class="viewcol" :span="6">【标签】: {{ list.tags }}</el-col>
    </el-row>
    <el-row class="viewrow">
      <el-col class="viewcol" :span="6"
        >【学科】: {{ list.subjectName }}</el-col
      >
      <el-col class="viewcol" :span="6"
        >【目录】: {{ list.directoryName }}</el-col
      >
      <el-col class="viewcol" :span="6">【方向】: {{ list.direction }}</el-col>
    </el-row>
    <el-row class="viewrow">
      <el-col class="viewcol" :span="24">【题干】: </el-col>
      <el-col><span style="color:blue" v-html="list.question"></span></el-col>
      <el-row v-if="list.questionType == '1'">
        <el-col class="viewcol"
          >单选题 选项 ：（以下选中的选项为正确答案）</el-col
        >
        <el-col class="viewcol" v-for="item in list.options" :key="item.id"
          ><el-radio v-model="model" :label="item.isRight">{{
            item.code
          }}</el-radio>
        </el-col>
      </el-row>
      <el-row v-else-if="list.questionType == '2'">
        <el-col class="viewcol"
          >多选题 选项 ：（以下选中的选项为正确答案）</el-col
        >
        <el-checkbox-group v-model="checkList">
          <el-col class="viewcol" v-for="item in list.options" :key="item.id">
            <el-checkbox
              :label="item.title"
              disabled
              :checked="item.isRight === 1"
            ></el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-row>
    </el-row>

    <el-row class="viewrow">
      <el-col class="viewcol" :span="24"
        >【参考答案】:
        <el-button type="danger" @click="clicksp"
          >视频答案预览</el-button
        ></el-col
      >
      <el-col v-if="state">
        <video :src="src" autoplay controls></video>
      </el-col>
    </el-row>
    <el-row class="viewrow">
      <el-col class="viewcol" :span="24"
        >【答案解析】: <span v-html="list.answer"></span
      ></el-col>
    </el-row>
    <el-row>
      <el-col class="viewcol" :span="24"
        >【题目备注】: {{ list.remarks }}</el-col
      >
    </el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      list: {},
      src: '',
      checkList: [],
      state: false
    }
  },
  created() {
    this.getQuestionsPreview()
  },
  mounted() {},
  methods: {
    async getQuestionsPreview() {
      try {
        const { data } = await detail({ id: this.id })
        this.list = data
      } catch (err) {
        this.$message.error('获取数据失败')
      }
    },
    clicksp() {
      this.state = !this.state
      if (this.state) {
        if (this.list.videoURL.trim()) {
          this.src = this.list.videoURL
        } else {
          this.$message.info('抱歉，没有该视频')
        }
      }
    }
  },
  computed: {
    questionType() {
      if (this.list.questionType === '1') {
        return '单选'
      } else if (this.list.questionType === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficulty() {
      if (this.list.questionType === '1') {
        return '简单'
      } else if (this.list.questionType === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    label(val) {
      if (val === 'A') {
        return '0'
      } else if (val === 'B') {
        return '1'
      } else if (val === 'C') {
        return '2'
      } else {
        return '3'
      }
    },
    model() {
      return 1
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.viewcol {
  margin: 11px 0;
}
.viewrow {
  padding-bottom: 15px;
  border-bottom: 1px solid #000;
}
video {
  width: 400px;
}
</style>
